<template>
  <!-- 做使用el-dialog做签字的弹框 -->
  <el-dialog
    title="签字"
    :visible.sync="dialogVisible"
    v-if="dialogVisible"
    width="800px"
    append-to-body
  >
    <!-- <el-form :inline="true">
      <el-form-item label="画笔粗细">
        <el-select v-model="lineWidth" style="width:100px">
          <el-option v-for="item in lineOpts" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="画笔颜色">
        <el-color-picker v-model="lineColor" />
      </el-form-item>
      <el-form-item label="背景颜色">
        <el-color-picker v-model="bgColor" />
      </el-form-item>
      <el-form-item label="是否剪裁">
        <el-switch v-model="isCrop" />
      </el-form-item>
    </el-form>-->
    <!-- 使用这个签名组件 -->
    <vue-esign class="hu-esign" ref="esignRef" :isCrop="isCrop" v-bind="$attrs" />
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleGenerate" type="primary">生成签字图片</el-button>
      <el-button @click="handleReset" type="warning">清空画板</el-button>
      <el-button @click="dialogVisible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false, // 弹框是否开启
      lineWidth: 4,
      lineColor: "#000000",
      bgColor: "",
      isCrop: false
    };
  },
  computed: {
    lineOpts() {
      return new Array(10).fill(1).map((v, i) => ++i);
    }
  },
  methods: {
    open() {
      this.dialogVisible = true;
    },
    handleReset() {
      // 清空画布
      this.$refs.esignRef.reset();
    },
    handleGenerate() {
      this.$refs.esignRef
        .generate()
        .then(res => {
          // 得到了签字生成的base64图片
          this.$message.success("生成成功");
          this.$emit("update", res);
          this.dialogVisible = false;
        })
        .catch(() => {
          //  没有签名，点击生成图片时调用
          this.$message.error("未签名！");
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.hu-esign {
  border: 1px dashed #c2c1c1;
}
</style>